【Vue】解决路由切换,页面不更新的实用方法 | 您所在的位置:网站首页 › vue 跳转页面问题 › 【Vue】解决路由切换,页面不更新的实用方法 |
前言:vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了。 一、问题呈现 freddy nick mike //路由配置文件代码 import Vue from 'vue' import Router from 'vue-router' import Page1 from '@/page/Page1' Vue.use(Router) export default new Router({ routes: [ {path: '/page1', component: Page1 }, {path: '/page1/:name', component: Page1 } ], mode:'history' }) 名字: export default { name:'page1', mounted(){ this.value = this.$route.params.name; }, data(){ return { value:'' } } } 在路由中进行切换结果
这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新 二、解决方案① 给增加一个不同:key值,这样vue就会识别这是不同的了。 freddy nick mike export default{ data(){ return { } }, computed:{ key(){ return this.$route.path + Math.random(); } } }在路由中进行切换结果 这时候路由就会更新了。不过这也就意味着需要把每个都绑定一个key值。如果我从page1跳到page2不同组件的话,我其实是不用担心组件更新问题的。 三、解决方案② 给增加一个不同v-if值,来先摧毁,然后再重新创建起到刷新页面的效果。 freddy nick mike export default{ data(){ return { routerAlive:true } }, methods:{ routerRefresh(){ this.routerAlive = false; this.$nextTick(()=>{ this.routerAlive = true; }); } } }①因为router-link组件有取消点击事件,这里的.native就是为了触发组件原生标签中的事件。 ②this.$nextTick(()=>{}) 的用法是等this.routerAlive = false; 触发后再执行 this.routerAlive = true; 从而起到摧毁再创建的效果。 四、解决方案②的延伸,在路由内部触发路由的刷新。 方案①,方案②都是通过路由的外部来更新路由的,那如果想从路由内部来更新路由呢? freddy nick mike export default{ data(){ return { routerAlive:true } }, provide(){ //在父组件中创建属性 return { routerRefresh: this.routerRefresh } }, methods:{ routerRefresh(){ this.routerAlive = false; this.$nextTick(()=>{ this.routerAlive = true; }); } } } 名字: 跳转到nick,不刷新路由 跳转到nick,并刷新路由 跳转到本身,不刷新路由 刷新本身 export default { name:'page1', inject:['routerRefresh'], //在子组件中注入在父组件中出创建的属性 mounted(){ this.value = this.$route.params.name; }, data(){ return { value:'' } }, methods:{ linkToNick1(){ this.$router.push('/page1/nick'); }, linkToSelf1(){ this.$router.push('/page1/freddy'); }, linkToNick2(){ this.$router.push('/page1/nick'); this.routerRefresh(); }, linkToSelf2(){ this.routerRefresh(); } } } button { margin-top:10px;} button:hover { background:#ff9500; }
①、当我们点击"跳转到nick,不刷新路由" 时,会发现input的value值并没有改变。
②、当我们点击"跳转到nick,并刷新路由" 时,这时候input的value值就已经改变了。
③、当我们在input中输入随便输入些数值,然后点击"跳转到本身,不刷新路由",会发现input里面的内容没有刷新。
④、点击刷新本身就能触发刷新路由了,是不是很实用。 |
CopyRight 2018-2019 实验室设备网 版权所有 |